<template>
	<scroll-view scroll-y="true" :style="{height:windowH+'px'}" class="wrapper">
		<block v-if="userMsg!=''">
			<view v-if="blur&&userMsg.is_me!=1 && userMsg.is_see_index.is_see_flower==2" class="pos">
				<view class="alert">
					<view class="box">
						<view class="alertTxt">
							该用户设置必须赠送她一朵心动花才能查看她的用户主页，解锁之后今天可以随意访问该用户！
						</view>
						<image src="../../static/image/minhua.png" mode="aspectFill"></image>
						<view class="huaNum">
							你有{{userMsg.is_see_index.user_flower_balance}}朵心动花<text v-if="userMsg.is_see_index.user_flower_balance!=0" @tap="getHua">获取更多</text>
						</view>
						<view class="btnCont flex_row">
							<view @tap="giveUp">狠心离开</view>
							<view @tap="openMsg" v-if="userMsg.is_see_index.user_flower_balance!=0">赠送一朵</view>
							<view @tap="getHua" v-else>获取花朵</view>
						</view>
						<view @tap="getHua" class="use">
							心动花朵有什么用处？
						</view>
					</view>
				</view>
			</view>
		</block>
		<view :class="{blur:userMsg.is_me!=1&&blur&&userMsg.is_see_index.is_see_flower==2}" v-if="userMsg!=''">
			<view class="topCont">
				<view class="topBg"><view @tap="goBack" class="goback"><image src="../../static/backIcon.png" mode="aspectFit"></image></view></view>
				<image :src="userMsg.cover.c_img" mode="aspectFill"></image>
				<view class="userHead flex_row">
					<view @tap="lookHead(userMsg.mem_arr.avatarurl)" class="headPic">
						<image :src="userMsg.mem_arr.avatarurl" mode="aspectFill"></image>
					</view>
					<view class="makeTxt flex_row">
						<image src="../../static/image/make1.png"></image>
						<text>{{userMsg.mem_arr.make_friends_dec}}</text>
					</view>
				</view>
			</view>
			<view class="user">
				<view class="nameCont flex_row">
					<view class="left">
						<view class="userName">{{userMsg.mem_arr.nickname}}</view>
						<view class="label flex_row">
							<view :class="{man:userMsg.mem_arr.gender==1}" class="sex flex_row">
								<image v-if="userMsg.mem_arr.gender==1" src="../../static/image/M.png"></image>
								<image v-else src="../../static/image/G.png"></image>
								<text>{{userMsg.mem_arr.age}}</text>
							</view>
							<view>{{userMsg.mem_arr.height}}cm</view>
							<view v-if="userMsg.mem_arr.province!=''&&freeStyle==1">{{userMsg.mem_arr.province}}</view>
							<view>{{userMsg.mem_arr.emotional_state}}</view>
						</view>
					</view>
					<view v-if="userMsg.is_me!=1" @tap="bindLike" class="like flex_row">
						<image v-if="userMsg.is_like!=1" src="../../static/image/gz.png"></image>
						<image v-else src="../../static/image/gzon.png"></image>
						<text v-if="userMsg.is_like==1">已喜欢</text>
						<text v-else>喜欢TA</text>
					</view>
				</view>
				<view class="otherMsg">
					<view class="weizhi flex_row">
						<view v-if="freeStyle==1">
							<image src="../../static/image/wz_icon.png"></image>
							<text>{{userMsg.mem_arr.juli_str}}</text>
						</view>
						<view>{{userMsg.mem_arr.last_time}}活跃</view>
					</view>
					<view class="sign flex_row">
						<view>个性签名</view>
						<view>{{userMsg.mem_arr.profile}}</view>
					</view>
				</view>
			</view>
			<view class="listCont">
				<view @tap="bindTrends(userMsg.mem_arr.uid)" v-if="userMsg.community!=0" class="trends flex_row">
					<view class="left">动态</view>
					<view class="right flex_row">
						<text class="color_gray">{{userMsg.community}}</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<view @tap="bindPhone" v-if="userMsg.mem_arr.is_tx_phone==1" class="phone trends flex_row">
					<view class="left">认证<text class="color_gray font_24">手机/微信号已填写</text></view>
					<view class="right flex_row">
						<text>查看</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view v-if="userMsg.her_photo.list!=''" class="listCont">
				<view class="picNum color_gray">相册 ({{userMsg.her_photo.total}})</view>
				<view class="pic">
					<scroll-view scroll-x>
						<view @tap="lookimg(imgs.c_img)" v-for="(imgs,index) in userMsg.her_photo.list" :key="index"><image :src="imgs.c_img" mode="aspectFill"></image></view>
					</scroll-view>
				</view>
			</view>
			<view class="listCont">
				<view class="trends flex_row">
					<view class="left color_gray">关于</view>
				</view>
				<picker v-if="userMsg.is_me!=1" @change="bindScore" :range="scoreList">
					<view class="trends flex_row">
						<view class="left">颜值评分<text v-if="userMsg.ping_fee>1">({{userMsg.ping_fee}}分)</text></view>
						<view class="right flex_row">
							<text>打分</text>
							<image class="right_icon" src="../../static/image/right_icon.png"></image>
						</view>
					</view>
				</picker>
				<view @tap="bindAsk" class="trends flex_row no_border_b">
					<view class="left">对另一半的要求</view>
					<view class="right flex_row">
						<text>查看</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view v-if="userMsg.yaoyue.total!=0" class="listCont">
				<view class="trends flex_row">
					<view class="left color_gray">组织的邀约({{userMsg.yaoyue.total}})</view>
				</view>
				<view @tap="bindAct(item.id)" v-for="(item,index) in userMsg.yaoyue.list" :key="index" class="trends flex_row">
					<view class="left">{{item.h_title}}</view>
					<view class="right flex_row">
						<text v-if="userMsg.is_me!=1">感兴趣</text>
						<text v-else>编辑</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view :class="{nob:userMsg.is_me==1||userMsg.mem_arr.is_mo_say_hello==2}" class="listCont giftList">
				<view class="gift trends flex_row">
					<view class="left">收到的礼物 ({{userMsg.gift_record.total}})</view>
					<view @tap="bindGift" v-if="userMsg.is_me!=1" class="right flex_row">
						<text>送礼得到青睐</text>
						<image class="right_icon" src="../../static/image/right_icon.png"></image>
					</view>
				</view>
				<view class="giftCont">
					<scroll-view scroll-x>
						<view v-for="(gift,index) in userMsg.gift_record.list" :key="index" class="giftBox">
							<view class="num"><text v-if="gift.c_num>99">99+</text><text v-else>{{gift.c_num}}</text></view>
							<image :src="gift.c_img" mode="aspectFill"></image>
						</view>
					</scroll-view>
				</view>
				<view v-if="userMsg.is_me!=1" @tap="bindReport" class="report">被用户骚扰了？举报TA</view>
				<view v-else @tap="bindEdit" class="report">完善资料更容易收到礼物</view>
			</view>
			<view @tap="bindchat" v-if="userMsg.is_me!=1&&userMsg.mem_arr.is_mo_say_hello!=2" class="btn flex_row">
				<image src="../../static/image/hi.png" mode="aspectFill"></image>
				<text>打个招呼</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import headtitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',userid = '';
	export default {
		components:{headtitle},
		data(){
			return{
				windowH:0,userMsg:'',
				scoreList:[1,2,3,4,5,6,7,8,9,10],blur:true,freeStyle:''
			}
		},
		onLoad:function(options){
			var that = this;
			if(options.userid!=undefined){
				userid = options.userid;
				session = options.session;
				uni.getStorage({
					key: 'free_style',
					success:function(res){
						that.freeStyle  = res.data;
					}
				})
				that.getUserInfo();
// 				common.network.getStorage('userinfo',function(data){
// 					session = data.session;
// 					that.getUserInfo();
// 				})
			}
			that.getHeight();
		},
		onShow:function(){
			if(this.userMsg!=''){
				this.getUserInfo();
			}
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w){
					that.windowH = h-w/750;
				})
			},
			goBack:function(){
				uni.navigateBack({})
			},
			getHua:function(){
				uni.navigateTo({
					url:"/pagesA/getHua/getHua?session="+session
				})
			},
			giveUp:function(){
				uni.navigateBack({})
			},
			openMsg:function(){
				var that = this;
				var $data = {
					'type':'zusershow_flower_index',
					'session':session,
					'other_uid': userid,
				};
				common.network.request($data,function(res){
					console.log(res);
					that.blur = false;
				})
			},
			getUserInfo:function(){
				var that = this;
				var $data = {
					'type':'zusershow_show_index',
					'session':session,
					'other_uid':userid,
				};
				common.network.request($data,function(res){
					that.userMsg = res;
					console.log(res);
				})
			},
			//看头像
			lookHead:function(now){
				var str = [now];
				uni.previewImage({
					current:now,
					urls:str
				})
			},
			//查看相册
			lookimg:function(now){
				var userMsg = this.userMsg;
				if(userMsg.is_see_photo!=2){
					var arr = userMsg.her_photo.list;
					var str = [];
					for(var i=0;i<arr.length;i++){
						str.push(arr[i].c_img);
					}
					uni.previewImage({
						current:now,
						urls:str
					})
				}else{
					uni.showModal({
						content: "为了公平原则，请完善您的信息资料，上传相册照片等",
						confirmColor:'#6278FF',
						confirmText:'去完善',
						success:function(e){
							if(e.confirm){
								uni.navigateTo({
									url:"/pagesA/msgEdit/msgEdit?session="+session
								})
							}
						}
					})
				}
			},
			// 添加喜欢
			bindLike:function(){
				var that = this;
				var userMsg = that.userMsg;
				var $data = {
					'type':'zusershow_handel_like',
					'session':session,
					'other_uid':userid
				};
				common.network.request($data,function(res){
					if(res==0){
						that.userMsg.is_like = 2;
					}else{
						that.userMsg.is_like = 1;
					}
				})
			},
			//对另一半的看法
			bindAsk:function(){
				var that = this;
				this.needvip(function(res){
					that.bindmodel(res.list.other_ask);
				})
			},
			bindTrends:function(id){
				uni.navigateTo({
					url: "/pagesA/myAct/myAct?session="+session+"&userid="+userid
				})
			},
			//查看手机
			bindPhone:function(){
				var that = this;
				this.needvip(function(res){
					that.bindmodel(res.list.user_phone);
				})
			},
			bindmodel:function(txt){
				uni.showModal({
					showCancel:false,
					content: txt,
					confirmColor:'#6278FF',
				})
			},
			needvip:function(callback){
				var that = this;
				var $data = {
					'type':'zusershow_see_photo',
					'session':session,
					'other_uid':userid,
				};
				common.network.request($data,function(res){
					console.log(res)
					if(res.is_see==1){
						callback(res);
					}else{
						uni.showModal({
							content: '对方设置需要开通VIP才能查看',
							confirmColor:'#6278FF',
							confirmText:'开通',
							success:function(e){
								if(e.confirm){
									uni.navigateTo({
										url:"/pagesA/vip/vip?session="+session
									})
								}
							}
						})
					}
				})
			},
			bindchat:function(){
				uni.navigateTo({
					url:"/pagesA/chat/chat?session="+session+"&userid="+userid
				})
			},
			//打分
			bindScore:function(e){
				var that = this;
				var id = e.detail.value;
				var scoreList = that.scoreList;
				var fee = scoreList[id];
				var userMsg = that.userMsg;
				console.log(e.detail)
				if(userMsg.is_me!=1){
					var $data = {
						'type':'zusershow_get_fee',
						'session':session,
						'to_uid':userid,
						'c_fee':fee,
					};
					console.log($data)
					common.network.request($data,function(res){
						console.log(res);
						that.userMsg.ping_fee = res;
					})
				}else{
					uni.showModal({
						content:'自己不能给自己打分哦~',
						showCancel:false,
						confirmText:'知道了',
						confirmColor:'#6278FF',
					})
				}
			},
			//活动
			bindAct:function(id){
				uni.navigateTo({
					url: "/pagesA/actDetail/actDetail?actid="+id+"&session="+session
				})
			},
			//送礼
			bindGift:function(){
				uni.navigateTo({
					url:"/pagesA/giftList/giftList?session="+session+"&userid="+userid
				})
			},
			//举报用户
			bindReport:function(){
				uni.navigateTo({
					url: "/pagesA/report/report?session="+session+"&userid="+userid
				})
			},
			//完善资料
			bindEdit:function(){
				uni.navigateTo({
					url: "/pagesA/msgEdit/msgEdit?session="+session
				})
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		font-size: 30px;
		font-family: '微软雅黑';
	}
	.pos{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 100;
	}
	.pos .alert{
		position: absolute;
		top: 24%;
		left: 10%;
		width: 80%;
		box-sizing: border-box;
		background: linear-gradient(to right bottom,#B326EE,#561DD9);
		color: #fff;
		font-size: 28px;
		padding: 24px;
		border-radius: 10px;
	}
	.pos .box{
		background: rgba(0,0,0,0.2);
		padding: 24px;
		text-align: center;
	}
	.box .alertTxt{
		padding: 10px 0;
		text-align: left;
	}
	.box image{
		width: 74px;
		height: 74px;
	}
	.box .huaNum{
		padding-top: 10px;
		width: 100%;
		position: relative;
	}
	.huaNum text{
		margin-left: 20px;
		color: #00E69D;
		position: absolute;
		bottom: 0;
		right: 20px;
		
	}
	.box .btnCont{
		padding: 30px 0;
		justify-content: space-around;
	}
	.box .btnCont view{
		padding: 12px 40px;
		border-radius: 10px;
		border: 1px solid #FCE547;
		font-size: 30px;
		color: #5F1DD7;
		background: #FCE547;
	}
	.box .btnCont view:first-of-type{
		color: #FCE547;
		background: transparent;
	}
	.use{
		font-size: 30px;
		color: #00E69D;
		padding: 10px 0;
	}
	.blur{
		filter: blur(18px);
	}
	.cont{
		min-height: 100vh;
		height: 100%;
		position: relative;
	}
	.topCont{
		height: 450px;
		width: 100%;
		position: relative;
	}
	.topBg{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
	}
	.goback{
		width: 120px;
		height: 44px;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		padding-left: 20px;
		z-index: 10;
	}
	.topCont image{
		width: 100%;
		height: 100%;
	}
	.goback image{
		width: 44px;
		height: 44px;
	}
	.userHead{
		width: 100%;
		padding: 0 30px;
		box-sizing: border-box;
		align-items: flex-end;
		justify-content: space-between;
		color: #717082;
		font-size: 28px;
		position: absolute;
		bottom: -60px;
		left: 0;
	}
	.headPic{
		width: 150px;
		height: 150px;
		border-radius: 50%;
	}
	.headPic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.user{
		padding: 0 30px;
		padding-top: 60px;
		padding-bottom: 20px;
		border-bottom: 10px solid #F2F3F7;
	}
	.nameCont{
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 18px;
	}
	.userName{
		font-size: 34px;
		font-family: "黑体";
	}
	.label{
		padding: 16px 0;
	}
	.label view{
		padding: 2px 18px;
		background: #FE9E9D;
		color: #fff;
		font-size: 24px;
		margin-right: 20px;
		border-radius: 50px;
		min-width: 2em;
	}
	.label view:nth-of-type(2){
		background: #C2DDF0;
	}
	.label view:nth-of-type(3){
		background: #B0D5A9;
	}
	.label view:nth-of-type(4){
		background: #BEC3ED;
	}
	.like{
		background: #E9EAEE;
		color: #8A8D96;
		font-size: 26px;
		padding: 6px 22px;
		border-radius: 40px;
		min-width: 5em;
	}
	.makeTxt image,.like image{
		width: 30px;
		height: 30px;
		margin-right: 12px;
	}
	.sex image{
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}
	.sex.man{
		background: #A7CAFF;
	}
	.weizhi{
		font-size: 26px;
	}
	.weizhi view:first-of-type{
		margin-right: 30px;
	}
	.weizhi image{
		width: 22px;
		height: 22px;
		opacity: 0.9;
		margin-right: 10px;
	}
	.sign{
		align-items: flex-start;
		padding: 12px 0;
	}
	.sign view:first-of-type{
		min-width: 4em;
	}
	.sign view:last-of-type{
		margin-left: 30px;
		color: #353535;
	}
	.otherMsg{
		font-size: 28px;
		color: #8A8D96;
	}
	.color_gray{
		color: #8A8D96;
	}
	.color_back{
		color: #353535;
	}
	.font_24{
		font-size: 26px;
	}
	.listCont{
		padding: 0 30px;
		border-bottom: 10px solid #F2F3F7;
	}
	
	.trends{
		border-bottom: 1px solid #F2F3F7;
		justify-content: space-between;
		padding: 24px 0;
	}
	.gift{
		border-bottom: none;
	}
	.giftList{
		padding: 20px 30px;
		padding-bottom: 100px;
		border-bottom: 10px solid #fff;
	}
	.giftList.nob{
		border-bottom: none;
		padding-bottom: 20px;
	}
	.trends.no_border_b{
		border-bottom: none;
	}
	.trends .left text{
		margin-left: 14px;
		font-size: 28px;
	}
	.trends .right text{
		margin-right: 14px;
		font-size: 28px;
	}
	.trends .right text{
		color: #696FFF;
	}
	.trends .right .color_back{
		color: #353535;
	}
	.picNum{
		padding: 24px 0;
	}
	.picNum text{
		margin-left: 10px;
	}
	.pic{
		width: 100%;
		padding-bottom: 24px;
	}
	.pic scroll-view{
		width: 100%;
		white-space: nowrap;
	}
	.pic view{
		display: inline-block;
		width: 146px;
		height: 146px;
		margin-right: 18px;
		border-radius: 10px;
		overflow: hidden;
	}
	.pic view:last-of-type{
		margin-right: 0;
	}
	.pic image{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	} 
	.btn{
		width: 100%;
		height: 100px;
		line-height: 100px;
		justify-content: center;
		color: #fff;
		font-size: 34px;
		position: fixed;
		bottom: 0;
		left: 0;
		background: linear-gradient(to right,#AE33F6,#6673FF);
	}
	.btn:active{
		background: linear-gradient(to right,#6673FF,#AE33F6);
		transition: all 0.4s; 
	}
	.btn image{
		width: 36px;
		height: 36px;
		margin-right: 14px;
	}
	.giftCont{
		width: 100%;
		padding: 22px 0;
	}
	.giftCont scroll-view{
		width: 100%;
		white-space: nowrap;
	}
	.giftBox{
		width: 120px;
		height: 120px;
		display: inline-block;
		position: relative;
		margin-right: 40px;
	}
	.giftBox:last-of-type{
		margin-right: 0;
	}
	.giftBox view{
		background: #E62A1F;
		color: #fff;
		font-size: 22px;
		min-width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: 0;
	}
	.giftBox image{
		width: 100%;
		height: 100%;
	}
	.report{
		font-size: 24px;
		padding-top: 50px;
		padding-bottom: 10px;
		text-align: center;
		color: #6278FF;
	}
</style>
